<template>
	<view class="contain">
		<!-- 顶部搜索 -->
		<view class="searchBox">
			<view class="border_box">
				<image src="../../static/images/1-2.png" mode=""></image>
				<input type="text" v-model="searchValue" placeholder="红色记忆博物馆" placeholder-style="color:#f5f5f5;"/>
				<view class="search_btn" @click="toSearch">搜索</view>
			</view>
		</view>
		<!-- nav头部 -->
		<view class="nav">
			<scroll-view class="navMenu" scroll-x="true" show-scrollbar="false">
				<view class="scroll_box" :style="scrollbox_width">
					<view class="scroll_box_item" :class="item.active?'scroll_box_item_active':''" v-for="(item,index) in nav" :key="index" @click.stop="choiceNav(item.id)">{{item.name}}</view>
				</view>
			</scroll-view>
		</view>
		<!-- 内容 -->
		<view class="main">
			<view class="mian_menu" v-for="(item,index) in mainList" :key="index" @click.stop="toDetail(item)">
				<view class="mian_menu_item">
					<view class="mian_menu_item_img">
						<image :src="item.img[0]" mode="aspectFill"></image>
					</view>
					<view class="mian_menu_item_title">{{item.title}}</view>
					<view class="mian_menu_item_user">
						<view class="user_headImg"><image src="https://yjy.monkeysoftware.cn/WeiXin/Content/hybirdImg/iconShopping.png" mode="widthFix"></image></view>
						<view class="user_name">名字名字名字名字名字</view>
						<view class="user_zan"><image src="https://yjy.monkeysoftware.cn/WeiXin/Content/hybirdImg/navto.png" mode="widthFix"></image>777756</view>
					</view>
				</view>
			</view>
		</view>
		
		<uni-fab
			ref="reffab"
			horizontal='right'
			:content='content'
			@trigger="trigger"
		></uni-fab>
	</view>
</template>

<script>
	import uniFab from '@/components/uni-fab/uni-fab.vue'
	export default{
		components: {
			uniFab
		},
		data(){
			return{
				content: [{
					iconPath: '../../static/images/homeIcon.png',
					text: '我的评鉴'
				},{
					iconPath: '../../static/images/cartIcon.png',
					text: '发布评鉴'
				}],
				searchValue:'', //搜索关键字
				nav:[
					{ id:1,name:'红色记忆',active:true },
					{ id:2,name:'生活记忆',active:false },
					{ id:3,name:'城市记忆',active:false },
					{ id:4,name:'工业记忆',active:false },
					{ id:5,name:'童年记忆',active:false },
					{ id:6,name:'1童年记忆',active:false },
					{ id:7,name:'2童年记忆',active:false },
				],
				scrollbox_width:'', //宽度
				mainList:[
					{ id:11,img:['../../static/static/map.png'],title:'hjhdjhaf经济法计gfgdfgdf',userInfo:{nickname:'这个号航活动时间返回'}},
					{ id:12,img:['../../static/static/map.png'],title:'hjhdjhaf经dsgdfh计划计划',userInfo:{nickname:'梵蒂冈地方和'}},
					{ id:13,img:['../../static/static/map.png'],title:'hjhdjhsdfgdzf富一代计划',userInfo:{nickname:'rweqretwet'}},
					{ id:13,img:['../../static/static/map.png'],title:'hjhdjhsdfgdzf富一代计划',userInfo:{nickname:'rweqretwet'}},
					{ id:13,img:['../../static/static/map.png'],title:'hjhdjhsdfgdzf富一代计划',userInfo:{nickname:'rweqretwet'}},
					{ id:13,img:['../../static/static/map.png'],title:'hjhdjhsdfgdzf富一代计划',userInfo:{nickname:'rweqretwet'}},
					{ id:13,img:['../../static/static/map.png'],title:'hjhdjhsdfgdzf富一代计划',userInfo:{nickname:'rweqretwet'}},
				],
			}
		},
		methods:{
			// 搜索
			toSearch(){
				if(this.searchValue==''){
					this.searchValue='红色记忆博物馆';
				}
				console.log(555,this.searchValue)
			},
			choiceNav(e){
				this.nav.forEach((item,index)=>{
					item.active=false;
					if(item.id==e){
						item.active=true;
					}
				})
			},		
			trigger(e) {
				if(e.item.text === '我的评鉴') {
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else if (e.item.text === '发布评鉴') {
					uni.navigateTo({
						url: `/usercenter_subpages/EvaluationForum/addForum`
					})
				};
				this.$refs.reffab.close();
			},
			toDetail(item){
				uni.navigateTo({
					url:`/usercenter_subpages/EvaluationForum/forumDetail?forumMsg=${JSON.stringify(item)}`
				})
			}
		},
		onLoad() {
			// nav宽度
			this.scrollbox_width='width:'+this.nav.length*160+'rpx';
		}
	}
</script>

<style lang="scss" scoped>
	.contain{
		width: 100vw;
		height: 100vh;
		background-color: #F5f5f5;
		// 搜索样式
		.searchBox{
			width: 100%;
			height: 130rpx;
			padding: 26rpx 20rpx;
			background-color: #BC936A;
			.border_box{
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				border: 1rpx solid #fff;
				border-radius: 30rpx;
				padding: 10rpx 10rpx 10rpx 20rpx;
				font-size: 30rpx;
				image{
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}
				input{
					width: 530rpx;
					color: #F5f5f5;
				}
				.search_btn{
					background-color: #fff;
					padding: 6rpx 16rpx;
					color: #BC936A;
					border-radius: 14rpx;
				}
			}
		}
		// 顶部nav
		.nav{
			width: 100%;
			height: 80rpx;
			border-radius: 12rpx 12rpx 0 0;
			overflow: hidden;
			margin-top: -10rpx;
			padding: 0 20rpx;
			background-color: #f5f5f5;
			.navMenu{
				width: 100%;
				height: 100%;
				.scroll_box{
					padding: 0 10rpx;
					display: flex;
					justify-content: space-around;
					.scroll_box_item{
						color: #999;
						padding: 0 20rpx 0 0;
						height: 80rpx;
						line-height: 80rpx;
					}
					.scroll_box_item_active{
						color: #000;
						background: url(https://yjy.monkeysoftware.cn/WeiXin/Content/hybirdImg/findCesuo.png) no-repeat bottom right;
						background-size: 80% 100%;
					}
				}
			}
		}
		// 主体内容
		.main{
			width: 100vw;
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx 20rpx 60rpx 20rpx;
			.mian_menu{
				width: 50%;
				height: 550rpx;
				padding: 10rpx;
				.mian_menu_item{
					width: 100%;
					height: 100%;
					background-color: #fff;
					border-radius: 20rpx;
					box-shadow: 0 0 10rpx 5rpx rgba($color: #000000, $alpha: .1);
					overflow: hidden;
					.mian_menu_item_img{
						width: 100%;
						height: 400rpx;
						overflow: hidden;
						image{
							width: 100%;
						}
					}
					.mian_menu_item_title{
						height: 40rpx;
						line-height: 40rpx;
						padding: 0 20rpx;
						margin: 10rpx 0;
						font-size: 26rpx;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;  
						text-overflow: ellipsis;  
						display: -webkit-box;  
						-webkit-line-clamp: 1;    //文本一行显示
						-webkit-box-orient: vertical; 
					}
					.mian_menu_item_user{
						display: flex;
						align-items: center;
						padding: 10rpx 0 10rpx 20rpx;
						.user_headImg{
							width: 40rpx;
							height: 40rpx;
							border-radius: 20rpx;
							overflow: hidden;
							margin-right: 10rpx;
							image{
								width: 100%;
							}
						}
						.user_name{
							font-size: 28rpx;
							font-weight: 600;
							flex: 3;
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;  
							text-overflow: ellipsis;  
							display: -webkit-box;  
							-webkit-line-clamp: 1;    //文本一行显示
							-webkit-box-orient: vertical; 
						}
						.user_zan{
							flex: 2;
							font-size: 26rpx;
							display: flex;
							align-items: center;
							padding: 0 6rpx 0 0;
							image{
								width: 40rpx;
								height: 40rpx;
							}
						}
					}
				}
			}
		}
	}
</style>